<template>
    <div class="role-table-container">
        <el-card shadow="never" class="table-container">
            <template #header>
                <el-button 
                type="success" 
                @click="openAddOrEdidDialog(undefined)"
                
                    ><ElSvgIcon 
                    a-icon-name="el-icon-plus"
                     :aSize="15"
                    />&nbsp;新增</el-button
                >
                <el-button
                    type="danger"
                    :disabled="ids.length === 0"
                    @click="handleDelete()"
                    ><ElSvgIcon a-icon-name="el-icon-delete" :aSize="15"/>&nbsp;删除</el-button
                >
            </template>

            <el-table
                ref="dataTableRef"
                v-loading="loading"
                :data="roleList"
                highlight-current-row
                border
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="角色名称" prop="name" min-width="100" />
                <el-table-column label="角色编码" prop="code" width="150" />

                <el-table-column label="状态" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 1" type="success"
                            >正常</el-tag
                        >
                        <el-tag v-else type="info">禁用</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    label="排序"
                    align="center"
                    width="80"
                    prop="sort"
                />

                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            link
                            @click="openAssignMenuDialog(scope.row)"
                        >
                        <ElSvgIcon a-icon-name="el-icon-position" :aSize="15"/>&nbsp;分配权限
                        </el-button>
                        <el-button
                            type="primary"
                            size="small"
                            link
                            @click="openAddOrEdidDialog(scope.row.id)"
                        >
                        <ElSvgIcon a-icon-name="el-icon-edit" :aSize="15"/>&nbsp;编辑
                        </el-button>
                        <el-button
                            type="primary"
                            size="small"
                            link
                            @click="handleDelete(scope.row.id)"
                        >
                        <ElSvgIcon a-icon-name="el-icon-delete" :aSize="15"/>&nbsp;删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination
                v-if="total > 0"
                v-model:total="total"
                v-model:currentPage="queryParamsModel.pageNum"
                v-model:pageSzie="queryParamsModel.pageSize"
                @pagination="handleQuery"
            />
            <!-- {{queryParamsModel}} -->
            <!-- testPageSizeRef= {{testPageSizeRef}} -->
        </el-card>
    </div>
    <RoleAddEditDialog ref="roleAddEditDialogRef"></RoleAddEditDialog>
    <RoleAssignMenuDialog 
     ref="roleAssigMenuDialogRef"></RoleAssignMenuDialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as roleApi from '@/api/role/role_api_index.ts'
import { TypeRolePageVoI, TypeRoleQueryI } from '@/api/role/role_types.ts';
import {$bus} from '@/event_bus/event_bus_index.ts'
import { ElMessage, ElMessageBox } from 'element-plus';
import Pagination from '@/components/pagination/pagination_index.vue'
import ElSvgIcon from '@/components/el-svg-icon/el_svg_icon_index.vue';
import RoleAddEditDialog from './role_add_edit_dialog.vue'
import RoleAssignMenuDialog from './role_assign_menu_dialog.vue'
////#region defineXxx
//defineOptions({
//name:
//});

//const props=defineProps({
//propA:{
//type:String,
//required:true
//},
//propB:{
//type:Number,
//default:1
//},
//propC:{
//type:String as PropType<MyType>,
//required:true
//},
//});

//const emit = defineEmits<{
//event1:[para1:number,para2:string],
//event2:[para1:number,para2:string],
//}>();
////#endregion
const queryParamsModel = defineModel<TypeRoleQueryI>({ 
   required:true
});

const testPageSizeRef=ref(30);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);



const roleAddEditDialogRef=ref();
const roleAssigMenuDialogRef=ref();



const roleList = ref<TypeRolePageVoI[]>();




/** 查询 */
function handleQuery() {
  loading.value = true;
  roleApi.getRolePage(queryParamsModel.value)
    .then(({ data }) => {
      roleList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

$bus.on('role-table-query', () => {
    handleQuery()
})

$bus.on('role-reset-and-query', () => {
    queryParamsModel.value.pageNum=1;
    queryParamsModel.value.keywords=undefined
    handleQuery()
})

/** 行checkbox 选中事件 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

/** 删除角色 */
function handleDelete(roleId?: number) {
  const roleIds = [roleId || ids.value].join(",");
  if (!roleIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    loading.value = true;
    roleApi.deleteRoles(roleIds)
      .then(() => {
        ElMessage.success("删除成功");
        queryParamsModel.value.pageNum=1;
        handleQuery()
      })
      .finally(() => (loading.value = false));
  });
}

const openAssignMenuDialog=(checkedRoleVo:TypeRolePageVoI)=>{
    roleAssigMenuDialogRef.value.openDialog(checkedRoleVo);
}
const openAddOrEdidDialog=(roleId?:number)=>{
    roleAddEditDialogRef.value.openDialog(roleId)
}

onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped></style>
